import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

import CSS from "@/views/CSS.vue";
import HTML from "@/views/HTML.vue";
import JavaScript from "@/views/JavaScript.vue";
import JavaScriptChapter1 from "@/views/jscomponent/chapter1.vue";
import JavaScriptChapter2 from "@/views/jscomponent/chapter2.vue";
import CssDetail from "@/views/CssDetail.vue";

//路由表
const router = createRouter({
  //利用浏览器流失history对象记录
  // history: createWebHistory(),
  //使用hash  #
  history: createWebHashHistory(),
  routes: [
    {
      name: "myhtml",
      path: "/html",
      component: HTML,
    },
    {
      name: "mycss",
      path: "/css",
      component: CSS,
      children: [
        {
          name: "CssDetail",
          // 在路径中添加动态参数
          path: "/css/detail/:id/:title/:content",
          component: CssDetail,
        },
      ],
    },
    {
      name: "myjs",
      path: "/js",
      component: JavaScript,
      children: [
        {
          path: "/js/chapter1",
          component: JavaScriptChapter1,
        },
        {
          path: "/js/chapter2",
          component: JavaScriptChapter2,
        },
      ],
    },
  ],
});
export default router;
